import React, {useRef, useState} from "react";
import {Avatar, message} from "antd";
import style from "./VoiceMessage.module.scss"
import {UserOutlined} from "@ant-design/icons";
import {timestampToTime} from "../../../utils/dateTimeUtlis";
import ReplyAndPublish from "../../../component/ReplyAndPublish/ReplyAndPublish";
import {store} from "../../../store/store";
import {addBlogComment, getBlogCommentList} from "../commentsSectionApi";


const VoiceMessage = (props) => {
    const [messageList, setMessageList] = useState([])
    const imgUrl = props.item.userPhotoUrl
    const ReplyAndPublishRef = useRef()
    const [replyId, setReplyId] = useState(0)

    //打开回复文本域
    const openReplyAndPublish = (id, name) => {
        setReplyId(id)
        ReplyAndPublishRef.current.showModal(name)
    }


    //获取本评论的回复
    const getData = () => {
        const listQuery = {page: 1, limit: 999}
        const searchData = {parentId: props.item.id}
        getBlogCommentList({searchData, listQuery}).then(res => {
            if (res.code === '200') {
                setMessageList(res.data)
            } else {
                message.error('获取留言失败')
            }
        }).catch(e => {
            message.error('获取留言失败')
        })
    }


    //提交回复
    const submitMessage = (text) => {
        const commentsData = {
            commentContent: text,
            blogTextId: props.blogId,
            blogUserId: store.getState().UserRedux.user.id,
            parentId: replyId
        }
        addBlogComment(commentsData).then(res => {
            if (res.code === '200') {
                message.success('回复成功')
                getData()
            } else {
                message.error('回复失败')
            }
        }).catch(() => {
            message.error('回复失败')
        })
    }


    return (
        <div className={style.MessageItems}
             style={{border: props.item.replyMessageId === '0' ? '1px solid #F7F8F9' : ''}}>
            <div style={{display: "flex"}}>
                <div className={style.MessageItems_left}>
                    <div>
                        {imgUrl ? <Avatar src={imgUrl} shape="square" size={54} icon={<UserOutlined/>}/> :
                            <Avatar shape="square" size={54} icon={<UserOutlined/>}/>}
                    </div>
                </div>
                <div className={style.MessageItems_right}>
                    <div style={{display: "flex", marginTop: '5px'}}>
                        {/*名称*/}
                        <div style={{color: '#26bbf1'}}>
                            {props.item.userName}
                        </div>
                        {/*日期*/}
                        <div style={{color: '#9FB6CA', marginLeft: '10px'}}>
                            <span>{timestampToTime(new Date(props.item.createdAt).getTime())}</span>
                        </div>
                        {/*回复按钮*/}
                        <div style={{marginLeft: '10px', marginRight: '10px', cursor: "pointer", color: '#7C7979'}}
                             onClick={() => openReplyAndPublish(props.item.id, props.item.userName)}>回复
                        </div>
                    </div>
                    <div style={{marginTop: '10px'}}>{props.item.commentContent}</div>
                    {/*//回复次数*/}
                    <div className={style.MessageItems_right_bottom}>
                        <div onClick={getData} style={{cursor: "pointer", marginRight: '0.5rem'}}>
                            <i className="iconfont icon-pinglun-copy-copy"
                               style={{marginLeft: '10px', color: '#FFD666'}}></i>
                            <span>{props.item.responseTimes}:查看回复</span>
                        </div>
                    </div>
                </div>
            </div>
            {/*回复的回复*/}
            <div style={{width: '99%', marginLeft: '1%'}}>
                {messageList.map((i) => {
                    return (
                        <div key={i.id}>
                            <VoiceMessage
                                blogId={props.blogId}
                                item={i}>
                            </VoiceMessage>
                        </div>
                    )
                })}
            </div>
            <ReplyAndPublish submitMessage={submitMessage}
                             title={'回复~~'}
                             maxLength={500}
                             ref={ReplyAndPublishRef}>
            </ReplyAndPublish>
        </div>
    )
}

export default VoiceMessage
